<template>
  <div class="spu">
    <el-card>
      <Category></Category>
    </el-card>
    <el-card style="margin-top: 20px">
      <div v-show="scene == 0">
        <el-button type="primary" icon="Plus" @click=addSPU
          :disabled="categoryStore.category3Id ? false : true">添加SPU</el-button>
        <el-table border style="margin:20px 0px" :data="records">
          <el-table-column label="序号" type='index' width="80px"> </el-table-column>
          <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
          <el-table-column label="SPU描述" prop="description"> </el-table-column>
          <el-table-column label="SPU操作">
            <template #="{ row, $index }">
              <el-button type="primary" icon="Plus" title="添加SKU" size="small" @click="addSKU(row)"></el-button>
              <el-button type="primary" icon="Edit" title="修改SPU" size="small"
                @click="updateSPU(row, $index)"></el-button>
              <el-button type="primary" icon="View" title="查看当前SKU" size="small" @click="skuInfoList(row)"></el-button>
              <el-button type="danger" icon="Delete" @click="deleteSpu(row, $index)" title="删除SPU"
                size="small"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]" background
          layout=" prev, pager, next, jumper, ->, total,sizes" :total="total" @size-change="getSpuList"
          @current-change="getSpuList" />
      </div>
      <spuForm ref="spu" v-show="scene == 1" @changeScene="changeScene"></spuForm>
      <skuForm ref="sku" v-show="scene == 2" @changeScene="changeScene"></skuForm>
      <el-dialog title="SKU列表" v-model="showSkuDialog">
        <el-table border :data="skuArr">
          <el-table-column label="SKU名字" prop="skuName"></el-table-column>
          <el-table-column label="SKU价格" prop="price"></el-table-column>
          <el-table-column label="SKU重量" prop="weight"></el-table-column>
          <el-table-column label="SKU图片">
            <template #="{ row, $index }">
              <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang='ts'>
import { onBeforeMount, onMounted, ref, onActivated, onDeactivated, watch, reactive } from 'vue'
import Category from '@/components/Category/index.vue'
import useCategoryStore from '@/store/modules/category';
import { spuListAPI, deleteSpuAPI, getSKUBySpuId } from '@/api/product/spu/index.ts'
import { SpuResponseData, spuData } from '@/api/product/spu/type.ts'
import { ElMessage } from 'element-plus';
import skuForm from './skuForm.vue'
import spuForm from './spuForm.vue'
let pageNo = ref(1)
let pageSize = ref(5)
let categoryStore = useCategoryStore()
let records = ref([])
let total = ref(0)
// 场景切换，不同场景渲染不同的el-card卡片
let scene = ref(0)   //0:显示已有的SPU，1：添加或修改已有的spu，2：添加或修改已有的sku
// 获取spuForm组件实例
let spu = ref()
// 获取sku组件实例
let sku = ref()
// sku弹窗显示与隐藏
let showSkuDialog = ref<boolean>(false)
// 弹簧展示的sku列表数据
let skuArr = ref([])
// 监听三级分类的变化
watch(() => categoryStore.category3Id, () => {
  // 如果没有category3Id，那么久不能发送请求
  if (!categoryStore.category3Id) return
  getSpuList()
})
const getSpuList = async () => {
  // 调用接口发送请求
  let result: SpuResponseData = await spuListAPI(pageNo.value, pageSize.value, categoryStore.category3Id)
  const { code, data } = result
  if (code == 200) {
    console.log(data);
    records.value = data.records
    total.value = data.total
  }
}
// 删除某一项spu
const deleteSpu = async (row: spuData, $index: number) => {
  console.log(row, $index);
  let result = await deleteSpuAPI(row.id)
  const { code, data } = result
  if (code == 200) {
    ElMessage.success('删除成功')
    // 调用接口获取列表页数据
    getSpuList()
  }
}
// 添加SKU
const addSKU = (row: any) => {
  //点击添加SKU按钮切换场景为2
  scene.value = 2;
  //调用子组件的方法初始化添加SKU的数据
  sku.value.initSkuData(categoryStore.category1Id, categoryStore.category2Id, row);
}
// 查看某个spu下的所有的sku列表
const skuInfoList = async (row: any) => {
  let result = await getSKUBySpuId(row.id)
  const { code, data } = result
  if (code == 200) {
    skuArr.value = data
    showSkuDialog.value = true
  }
}
// 添加SPU
const addSPU = () => {
  spu.value.addSpuData()
  scene.value = 1

}
// 修改某一项SPU
const updateSPU = (row, $index) => {
  spu.value.initSpuData(row)
  scene.value = 1



}
// 修改场景scene
const changeScene = (sceneNumber: number) => {
  scene.value = sceneNumber,
    // 调用接口重新获取列表页数据
    getSpuList()
}
// 调用接口获取一级分类菜单
const getC1List = async () => {
  try {
    await categoryStore.getC1List()
  } catch (error) {
    console.log(error);
  }
}
onBeforeMount(() => {

})
onMounted(() => {
  getC1List()
})
// keep-alive自带的两个钩子函数
onActivated(() => {
  getC1List()
})
onDeactivated(() => {
  // 因为category组件是属性管理和spu管理公共的组件，所以这里在组件销毁时，清空store中的数据
  categoryStore.$reset()
  records.value = []
})

</script>
<style lang="scss" scoped></style>